<template>
  <div class="container">
    <h1>护眼小卫士</h1>
    <div class="user-info">
      <p>姓名: <span>{{ userInfo.name || '请输入用户姓名进行查询' }}</span></p>
      <p>性别: <span>{{ userInfo.gender || '未查询' }}</span></p>
      <p>年龄: <span>{{ userInfo.age || '未查询' }}</span></p>
      <p>年级: <span>{{ userInfo.grade || '未查询' }}</span></p>
      <p>视力检查次数: <span>{{ userInfo.visionCheckCount || 0 }}</span> 次</p>
      <p>眼保健操次数: <span>{{ userInfo.eyeExerciseCount || 0 }}</span> 次</p>
      <p>休息次数: <span>{{ userInfo.restCount || 0 }}</span> 次</p>
    </div>
    <input v-model="username" placeholder="请输入用户姓名" @keyup.enter="fetchUserInfo" />
    <button @click="fetchUserInfo">查询</button>

    <!-- 眼保健操视频 -->
    <div class="video-container">
      <h2>眼保健操视频</h2>
      <iframe src="https://player.bilibili.com/player.html?bvid=BV1ju4y1s7b3" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
    </div>

    <!-- 学习休息小建议 -->
    <div class="suggestions-container">
      <h2>学习休息小建议</h2>
      <ul>
        <li>每隔20分钟，远眺20秒，放松眼睛。</li>
        <li>每学习45分钟，休息5分钟，做眼保健操。</li>
        <li>保持正确的坐姿，与书本保持30厘米的距离。</li>
        <li>确保充足的光线，避免在弱光下阅读。</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      // 初始化为空对象，不显示数据
      userInfo: {}
    };
  },
  methods: {
    fetchUserInfo() {
      if (!this.username.trim()) {
        alert('请输入用户姓名');
        return;
      }

      this.$http.get(`/healthrecord/${this.username}`) // 移除多余的 'api' 部分
        .then(response => {
          if (response.data && Object.keys(response.data).length > 0) {
            this.userInfo = response.data;
          } else {
            this.showDummyData();
          }
        })
        .catch(error => {
          console.error('Error fetching user info:', error);
          this.showDummyData();
        });
    },
    showDummyData() {
      this.userInfo = {
        name: '张三',
        gender: '男',
        age: '13',
        grade: '初一',
        visionCheckCount: 6,
        eyeExerciseCount: 20,
        restCount: 15
      };
    },
    resetUserInfo() {
      this.userInfo = {};
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  max-width: 800px;
  margin: auto;
}

h1 {
  color: #333;
  margin-bottom: 20px;
}

.user-info {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.user-info p {
  margin: 5px 0;
}

input {
  margin: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 200px;
}

button {
  margin: 10px;
  padding: 10px 20px;
  background-color: #409EFF;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #67C23A;
}

.video-container {
  margin-top: 20px;
  text-align: center;
}

.video-container h2 {
  color: #333;
  margin-bottom: 10px;
}

.video-container iframe {
  width: 100%;
  max-width: 560px;
  height: 315px;
  border: none;
}

.suggestions-container {
  margin-top: 20px;
  background-color: #f0f9ff;
  border: 1px solid #b3d9ff;
  padding: 20px;
  border-radius: 8px;
}

.suggestions-container h2 {
  color: #333;
  margin-bottom: 10px;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin: 5px 0;
  padding-left: 20px;
  background: url('data:image/svg+xml;utf8,<svg fill="%23000" height="16" viewBox="0 0 16 16" width="16" xmlns="<url id="" type="url" status="" title="" wc="">http://www.w3.org/2000/svg"><path</url>  d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zM3.5 5.5l4.5 4.5 4.5-4.5"></path></svg>') no-repeat left center;
}
</style>